<template>
  <div ref="myChart" :style="{ width: '100%', height: '100%',padding:'10px' }"></div>
</template>

<script>
export default {
  props: ['data'],
  created () {
    console.log('接收的data', this.data)
    this.option.series[0].data = this.data.series.map(item => item / 100)
    this.option.xAxis.data = this.data.xAxis.map(item => this.$moment(item).format('MM-DD'))
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{b}日  销售额:{c}'
        },
        grid: {
          width: '80%'
        },
        title: {
          text: '销售额趋势图',
          left: 'center',
          top: "top'",
          textStyle: {
            fontSize: 15
          },
          subtextStyle: {
            fontSize: 15
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          // ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            // formatter(data,index){
            //   },
            interval: 'auto'
          }
        },
        yAxis: [{
          type: 'value',
          name: '单位:元',
          offset: 0

        }],
        color: ['#ff5757'],
        // padding: [15, 15,15, 15],
        symbolSize: 4,
        series: [
          {
            data: [],
            type: 'line',
            smooth: true,
            areaStyle: {
              // 渐变
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#ff5757' // 0% 处的颜色
                  },
                  {
                    offset: 0.7,
                    color: '#ffeeee' // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    // console.log('组件接收的data',this.data);
    const myChart = this.$echarts.init(this.$refs.myChart)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
    myChart.setOption(this.option, true)
    console.log('更新后的option', this.option)
  },

  methods: {
  }
}
</script>
<style scoped></style>
